<html >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>我的消息</title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    </head>
    <style >
       .bar-title h4{
            background-color: #07E9A1;
          /*  text-align: center;*/
            color: #fff;
            height: 2rem;
            line-height: 2rem;
            margin-top: 0;
            margin-bottom: 0;
        }
       .bar-header .title {
        background: #07E9A1;
        color: #fff;
       }
       .item-avatar h2 span{
            float: right;
            font-size: 14px;

       }
       .bar-title h4 a{
          vertical-align: middle;
          margin-right: 30%;
       }
    </style>
    <body>
    
     <ion-header-bar  class="bar-positive bar-title">
             <h4 class="title">
              <ion-nav-buttons side="left" >
                  <a href="javascript:history.back(-1)" class="button button-icon icon ion-ios-arrow-back" nav-direction="back"></a>
              </ion-nav-buttons>
              我的消息
            </h4>
     </ion-header-bar>
     <ion-content>
      <!--   <div class="content has-header ionic-pseudo"> -->

      <div class="list">

        <a class="item item-avatar" href="#">
          <img src="http://www.runoob.com/try/demo_source/venkman.jpg">
          <h2>hy<span>00:20</span></h2>
          <p>[照片]</p>
        </a>

        <a class="item item-avatar" href="#">
          <img src="http://www.runoob.com/try/demo_source/spengler.jpg">
          <h2>LL<span>00:20</span></h2>
          <p>[动画表情]</p>
        </a>

        <a class="item item-avatar" href="#">
          <img src="http://www.runoob.com/try/demo_source/stantz.jpg">
          <h2>嘻嘻<span>00:20</span></h2>
          <p>Ugly little spud, isn't he?</p>
        </a>

        <a class="item item-avatar" href="#">
          <img src="http://www.runoob.com/try/demo_source/winston.jpg">
          <h2>米有<span>00:20</span></h2>
          <p>[微笑]</p>
        </a>

        <a class="item item-avatar" href="#">
          <img src="http://www.runoob.com/try/demo_source/tully.jpg">
          <h2>J<span>00:20</span></h2>
          <p>[语音]</p>
        </a>

        <a class="item item-avatar" href="#">
          <img src="http://www.runoob.com/try/demo_source/barrett.jpg">
          <h2>Dana<span>00:20</span></h2>
          <p>I am The Gatekeeper!</p>
        </a>

        <a class="item item-avatar" href="#">
          <img src="http://www.runoob.com/try/demo_source/slimer.jpg">
          <h2>Slimer<span>00:20</span></h2>
          <p>Boo!</p>
        </a>

      </div>
       <!--  </div> -->
      </ion-content>   
  </body>
</html>
